<template>
    <div>
        <h3>订单维护</h3>
        <el-row>
            <el-col :span="7"><div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="订单类型">
                        <el-select v-model="form.type" placeholder="请选择订单类型">
                            <el-option label="普通订单" value="普通订单"></el-option>
                            <el-option label="促销订单" value="促销订单"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div></el-col>
            <el-col :span="7"><div class="grid-content bg-purple-light">
                <div class="block">
                    <span class="demonstration">起始日期</span>
                    <el-date-picker
                            v-model="startTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
            </div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple">
                <div class="block">
                    <span class="demonstration">结束日期</span>
                    <el-date-picker
                            v-model="endTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd">
                    </el-date-picker> &nbsp; &nbsp;
                    <el-button @click="findByItem()" >查询</el-button>
                </div>
            </div></el-col>

        </el-row>

        <el-table
                :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="username"
                    label="客户名">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="订单编号">
            </el-table-column>
            <el-table-column
                    prop="orderstate"
                    label="订单状态">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="收货地址">
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="订单金额">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="下单时间">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="订单类型">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="choice(scope.row.orderid)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="totalCount">
            </el-pagination>
        </div>

        <el-dialog
                title="商品列表"
                :visible.sync="dialogVisible"
                width="50%">
            <el-table
                    :data="goodsTableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="batch"
                        label="批次">
                </el-table-column>
                <el-table-column
                        prop="specs"
                        label="规格">
                </el-table-column>
                <el-table-column
                        prop="goodsname"
                        label="商品名">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="数量">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型">
                </el-table-column>

            </el-table>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "OrderView",

        data() {
            return {
                tableData: [],
                form:{
                    type:''
                },
                startTime:'',
                endTime:'',
                dialogVisible:false,
                goodsTableData:[],
                totalCount:null,
                currentPage:1,
                pageSizes:[1,2,3,4],
                PageSize:4,
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            handleSizeChange(val) {
                this.PageSize=val
                this.currentPage=1
            },
            handleCurrentChange(val) {
                this.currentPage=val
            },
            choice(id) {
                this.dialogVisible=true
                this.$axios.get("/sscsys/sys-order/findById/"+id).then(
                    r=>{
                        console.log(r.data)
                        this.goodsTableData=r.data
                    }
                )
            },
            init(){
                this.$axios.get("/sscsys/sys-order/findAll").then(
                    r=>{
                        console.log(r.data)
                        this.tableData=r.data
                        this.totalCount=r.data.length;
                    }
                )
            },
            findByItem(){
                this.$axios.get("/sscsys/sys-order/findByItem",{
                    params:{
                        type:this.form.type,
                        startTime:this.startTime,
                        endTime:this.endTime
                    }
                }).then(
                    r=>{
                        console.log(this.form.type)
                        console.log(this.startTime)
                        console.log(this.endTime)
                        console.log(r.data)
                        this.tableData=r.data
                    }
                )
            }
        }
    }
</script>

<style scoped>

</style>